<template>
  <el-drawer
    class="fi-drawer"
    v-model="localModelValue"
    :title="title"
    :direction="direction"
    :size="size"
    v-bind="$attrs"
    v-on="$attrs"
  >
    <template #header>
      <slot name="header"
        ><span class="fi-drawer__header">{{ title }}</span></slot
      >
    </template>
    <slot></slot>
    <template #footer>
      <slot name="footer"
        ><div class="fi-drawer__footer">
          <FIButton @click="handleClose">取消</FIButton>
          <FIButton type="primary" @click="handleConfirm">确定</FIButton>
        </div></slot
      >
    </template>
  </el-drawer>
</template>
<script setup lang="ts">
import { computed, defineEmits } from 'vue'
import FIButton from '@/components/FIButton.vue'
import type { PropType } from 'vue'
enum DirectionEnum {
  RTL = 'rtl',
  LTR = 'ltr',
  TTB = 'ttb',
  BTT = 'btt',
}
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  direction: {
    type: String as PropType<DirectionEnum>,
    default: DirectionEnum.RTL,
    validator(value: string): boolean {
      return ['rtl', 'ltr', 'ttb', 'btt'].includes(value)
    },
  },
  title: {
    type: String,
    default: '',
  },
  size: {
    type: [Number, String],
    default: '480px',
  },
})

const emits = defineEmits(['update:modelValue', 'confirm'])

const localModelValue = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emits('update:modelValue', value),
})
const handleClose = () => {
  emits('update:modelValue')
}
const handleConfirm = () => {
  emits('confirm')
}
</script>
<style lang="less" scoped>
.fi-drawer__header {
  font-size: 18px;
  color: #303133;
  font-weight: bold;
}
.fi-drawer__footer {
  flex: auto;
}
::v-deep(.el-drawer__footer) {
  border-top: 1px solid #e8e8e8 !important;
}
</style>
